<template>
	<view class="back-top" :style="{bottom}" @click="backTop">
		<image src="/static/images/icon-backtop.png" mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		name:"back-top",
		props: {
			scrollTop: {type: Number, default: 0},
			top: {type: Number, default: 400},
		},
		data() {
			return {
				bottom: '-100px',
				preTop: 0
			};
		},
		methods: {
			backTop() {
				this.bottom = '-100px'
				this.$emit('backTop')
			}
		},
		watch: {
			scrollTop(val) {
				let scr = val.toFixed(2)
				if (scr >= this.top) {
					if (parseFloat(this.preTop) > parseFloat(scr)) {
						this.bottom = '-100px'
					} else {
						this.bottom = '20%'
					}
					this.preTop = scr
				} else {
					this.bottom = '-100px'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back-top {
		position: fixed;
		right: 30rpx;
		z-index: 100;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: bottom .25s ease-out;
		image {
			width: 72rpx;
			height: 72rpx;
		}
	}
</style>